﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chromely</title>
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css">
    <script src="../Content/js/jquery.min.js"></script>
    <script src="../Content/js/tether.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container justify-content-center">
        <!-- -->
        <div class="form-group row justify-content-center col-12">
            <div class="row col-12">
                <h1>Bound Object Demo</h1>
            </div>

            <!-- Nav pills -->
            <div class="row col-12">
                <ul class="nav nav-pills" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="pill" href="#sectionA">Get</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="pill" href="#sectionB">Post</a>
                    </li>
                </ul>
            </div>

            <div class="row col-12">
                <div class="row" style="height:25px;"></div>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div id="sectionA" class="container tab-pane active">
                        <br>
                        <div class="row">
                            <div class="col-12">
                                Route Path:&ensp;/democontroller/movies/get &ensp; <button id="buttonboundObjectGet" type="button" class="btn btn-primary btn-sm">Run</button>
                            </div>
                            <div style="height:100px;"></div>
                            <div class="col-12">
                                <div class='table-responsive'>
                                    <table id="boundObjectGetResult" class='table'>
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>Title</th>
                                                <th>Year</th>
                                                <th>Votes</th>
                                                <th>Rating</th>
                                                <th>Date</th>
                                                <th>RestfulAssembly</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="sectionB" class="container tab-pane fade">
                        <br>
                        <div class="row">
                            <div class="col-12">
                                Route Path:&ensp;/democontroller/movies/post&ensp;<button id="buttonboundObjectPost" type="button" class="btn btn-primary btn-sm">Run</button>
                            </div>
                            <div style="height:100px;"></div>
                            <div class="col-12">
                                <div id="boundObjectPostResult"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            (async function () {
                await CefSharp.BindObjectAsync("boundAsync");


                // Get
                document.getElementById('buttonboundObjectGet').addEventListener('click', async function () {
                    $('#boundObjectGetResult tbody').empty();

                    var result = await boundAsync.execute("/democontroller/movies/get");
                    console.log(result);

                    var jsonData = JSON.parse(result);
                    if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
                        for (var i = 0; i < jsonData.Data.length; i++) {
                            var row = '<tr>';

                            row += '<td>' + jsonData.Data[i].Id + '</td>';
                            row += '<td>' + jsonData.Data[i].Title + '</td>';
                            row += '<td>' + jsonData.Data[i].Year + '</td>';
                            row += '<td>' + jsonData.Data[i].Votes + '</td>';
                            row += '<td>' + jsonData.Data[i].Rating + '</td>';
                            row += '<td>' + jsonData.Data[i].Date + '</td>';
                            row += '<td>' + jsonData.Data[i].RestfulAssembly + '</td>';

                            row += '</tr>';
                            $('#boundObjectGetResult tbody').append(row);
                        }
                    }
                });

                // Post
                document.getElementById('buttonboundObjectPost').addEventListener('click', async function () {
                    $('#boundObjectPostResult tbody').empty();

                    var moviesJson = [
                        { Id: 1, Title: "The Shawshank Redemption", Year: 1994, Votes: 678790, Rating: 9.2 },
                        { Id: 2, Title: "The Godfather", Year: 1972, votes: 511495, Rating: 9.2 },
                        { Id: 3, Title: "The Godfather: Part II", Year: 1974, Votes: 319352, Rating: 9.0 },
                        { Id: 4, Title: "The Good, the Bad and the Ugly", Year: 1966, Votes: 213030, Rating: 8.9 },
                        { Id: 5, Title: "My Fair Lady", Year: 1964, Votes: 533848, Rating: 8.9 },
                        { Id: 6, Title: "12 Angry Men", Year: 1957, Votes: 164558, Rating: 8.9 }
                    ];

                    var result = await boundAsync.execute("/democontroller/movies/post", null, moviesJson);

                    var jsonData = JSON.parse(result);
                    if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
                        $('#boundObjectPostResult').html(jsonData.Data);
                    }
                });
            })();
        </script>
</body>
</html>










	
